<!DOCTYPE html>
<!--<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">-->
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>大数据可视化</title>
    <!-- <link rel="stylesheet" href="css/index.css" /> -->
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        /*@font-face {*/
            /*font-family: electronicFont;*/
            /*src: url(../font/DS-DIGIT.TTF);*/
        /*}*/

        body {
            font-family: Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
            padding-left: .375rem;
            padding-right: .375rem;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            min-width: 1024px;
            max-width: 1920px;
            /* 背景图定位 / 背景图尺寸 cover 完全铺满容器 contain 完整显示在容器内 */
            /* background: url(../images/bg.jpg) no-repeat #000; */
            background-color: rgb(4, 25, 62);
            background-size: cover;
            /* 行高是字体1.15倍 */
            line-height: 1.15;
        }

        header {
            /* position: relative; */
            height: 2rem;
            /* background: url(../images/head_bg.png) no-repeat top center; */
            background-size: 100% 100%;
            /* border:1px #02a6b5 solid; */
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        header h1 {
            width: 12.5rem;
            font-size: 0.475rem;
            color: #fff;
            text-align: center;
            line-height: 1rem;
            /* border:1px #fff solid; */
            /* box-shadow: #fff; */
            box-shadow: 0px 0px .125rem 1px rgba(255, 255, 255, 0.5);
            position: relative;
            /* height: 3.875rem; */
            /* border: 1px solid rgba(25, 186, 139, 0.17); */
            letter-spacing: .15rem;

        }

        h1::before {
            position: absolute;
            top: -2px;
            left: 25%;
            content: "";
            width: 6.25rem;
            height: .125rem;
            border-top: 2px solid #02a6b5;
            /* border-left: 2px solid #02a6b5; */
        }

        h1::after {
            position: absolute;
            bottom: -2px;
            left: 4.375rem;
            content: "";
            width: 3.75rem;
            height: .125rem;
            border-bottom: 2px solid #02a6b5;
            /* border-left: 2px solid #02a6b5; */
        }

        header .showTime {
            position: absolute;
            /* top: 0; */
            left: 1rem;
            width: 3rem;
            line-height: 0.35rem;
            font-size: 0.25rem;
            font-weight: bold;
            color: rgb(255, 255, 255);
            /* text-align: center; */
        }

        header .showWeather {
            position: absolute;
            /* top: 0; */
            right: 0.4rem;
            width: 3rem;
            line-height: 0.35rem;
            font-size: 0.25rem;
            font-weight: bold;
            color: rgb(255, 255, 255);
            /* border: #02a6b5 solid 1px; */
            /* text-align: center; */
        }

        header .showWeather .wicon {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: .3rem;
        }

        header .showWeather .wicon img {
            /* width: .55rem; */
            height: .5rem;
            margin-right: .2rem;
            /* border: springgreen solid 1px; */
        }

        header .showWeather .temperature {
            width: 3.1rem;
            font-size: .25rem;
            font-weight: 500;
            letter-spacing: .1rem;
            text-align: center;
            margin-top: .125rem;
            /* border: solid springgreen 1px; */
        }

        .mainbox {
            min-width: 1024px;
            max-width: 1920px;
            padding: 0.125rem;
            display: flex;
        }

        .mainbox .column {
            /* flex: 4; */
            width: 5.625rem;
            /* width: 22%; */
        }

        .mainbox .column:nth-child(2) {
            /* flex: 9; */
            width: 11.25rem;
            /* width: 48%; */
            margin: 0 0.125rem 0.1875rem;
            overflow: hidden;
        }

        .panel {
            position: relative;
            height: 5.75rem;
            border: 1px solid rgba(36, 128, 180, 0.6);
            box-shadow: rgb(36, 128, 179) 0px 2px 6px 0px;
            /* background: rgba(255, 255, 255, 0.04) url(../images/line\(1\).png); */
            background-color: rgb(9, 48, 104);
            /* padding: 0 0.1875rem 0.5rem; */
            margin-top: 5px;

            margin-bottom: 0.1875rem;
            /* display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap; */
        }

        .worldMap {
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 5px;
            margin-bottom: .1875rem;
            position: relative;
            height: 7.25rem;
            border: 1px solid rgba(36, 128, 180, 0.6);
            box-shadow: rgb(36, 128, 179) 0px 2px 6px 0px;
            /* background-color: #2f39a1; */
            background-color: #080a20;
            padding: 0;
            /* padding-top: .125rem; */

        }

        .panel2 {
            /* margin-top: 1000px; */
            margin-left: 5px;
            margin-right: 5px;
            position: relative;
            height: 4.25rem;
            border: 1px solid rgba(36, 128, 180, 0.6);
            box-shadow: rgb(36, 128, 179) 0px 2px 6px 0px;
            /* background: rgba(255, 255, 255, 0.04) url(../images/line\(1\).png); */
            background-color: rgb(9, 48, 104);
            /* padding: 0 0.1875rem 0.5rem; */
            margin-top: 5px;

            margin-bottom: 0.1875rem;
            /* display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap; */
        }

        .panel::before,
        .worldMap::before,
        .panel2::before {
            position: absolute;
            top: -3px;
            left: -3px;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 3px solid #07c2d3;
            border-left: 3px solid #07c2d3;
        }

        .panel::after,
        .worldMap::after,
        .panel2::after {
            position: absolute;
            top: -3px;
            right: -3px;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 3px solid #07c2d3;
            border-right: 3px solid #07c2d3;
        }

        .panel .panel-footer,
        .panel2 .panel-footer,
        .worldMap .worldMap-footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
        }

        .panel .panel-footer::before,
        .panel2 .panel-footer::before,
        .worldMap .worldMap-footer::before {
            position: absolute;
            bottom: -3px;
            left: -3px;
            content: "";
            width: 10px;
            height: 10px;
            border-bottom: 3px solid #07c2d3;
            border-left: 3px solid #07c2d3;
        }

        .panel .panel-footer::after,
        .worldMap .worldMap-footer::after,
        .panel2 .panel-footer::after {
            position: absolute;
            bottom: -3px;
            right: -3px;
            content: "";
            width: 10px;
            height: 10px;
            border-bottom: 3px solid #07c2d3;
            border-right: 3px solid #07c2d3;
        }

        .panel h2,
        .panel2 h2 {
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: rgba(35, 125, 191, 0.9);
            background-color: rgb(5, 29, 63);

            font-size: 0.25rem;
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
            /* border:1px #fff solid; */
        }

        .worldMap h2 {
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: rgba(35, 125, 191, 0.9);
            background-color: rgb(5, 29, 63);

            font-size: 0.25rem;
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
            /* border:1px #fff solid; */
            margin-bottom: .5rem;
        }

        .panel h2 .arrow1,
        .worldMap h2 .arrow1,
        .panel2 h2 .arrow1 {
            font-size: 0.15rem;
            font-weight: 800;
            margin: 2px;
            color: rgba(25, 186, 139, 0.4);
        }

        .panel h2 .arrow2,
        .worldMap h2 .arrow2,
        .panel2 h2 .arrow2 {
            font-size: 0.15rem;
            font-weight: 800;
            margin: 3px;
            color: rgba(255, 255, 255, 0.6);

        }

        .panel h2 a {
            margin: 0 0.1875rem;
            color: #fff;
            text-decoration: underline;
        }

        /* .panel .contentChart{
        width: 100%;
        height: 5.15rem;
        background-color: rgb(9, 48, 104);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: .1875rem;
        } */
        .panel .chart {
            height: 3rem;
            padding: .1875rem;
            /* z-index: 9; */
        }

        .worldMap .chart {
            height: 6.1rem;
            margin-left: 1.25rem;
            /* padding: .1875rem; */
            /* z-index: 9; */
            /* border:1px #02a6b5 solid; */
        }

        .panel2 .chart {
            height: 3.6rem;
            padding: .1875rem;
            padding-top: 0;
            /* border: #a9b502 solid 1px; */
            /* z-index: 9; */
        }

        .panel .chartt {
            height: 2rem;
            /*padding: .1875rem;*/
            border-bottom:1px #02a6b53b solid;
            /* z-index: 99; */
        }

        .pie1 .chart {
            height: 5rem;
            /* width: fit-content; */
            /* border: #02a6b5 ; */
            /* border:1px #02a6b5 solid; */
            /* padding: .1875rem; */
            /* border:1px #02a6b5 solid; */
            /* z-index: 99; */
        }

        .axis .chart {
            height: 4rem;
            padding: .15rem;
            /* border:1px #02a6b5 solid; */
        }

        .axis2 .chart {
            height: 4rem;
            padding: .15rem;
            /* border:1px #02a6b5 solid; */
        }

        .worldMap .ranking {
            position: absolute;
            top: 0.6rem;
            z-index: 9;
            margin-left: .1875rem;
        }

        .worldMap .aRow0 {
            font-weight: 700;
            font-size: .15rem;
            color: rgb(225, 223, 223);
            background-color: rgb(9, 11, 32);
            display: flex;
            /* justify-content: center; */
            padding-right: 10px;
            align-items: center;
        }

        .worldMap .aRow0 .theRanking {
            height: .5875rem;
            text-align: center;
            line-height: .5875rem;
            min-width: 23px;
            margin-right: 10px;
            margin-left: 5px;
        }

        .worldMap .aRow0 .country {
            height: .5875rem;
            text-align: left;
            line-height: .5875rem;
            min-width: 60px;
        }

        .worldMap .aRow0 .numOfPeople {
            height: .5875rem;
            text-align: right;
            line-height: .5875rem;
            /* border: solid 1px rgb(18, 59, 90); */
            min-width: 60px;
            margin-right: 15px;
        }

        .worldMap .aRow0 .serviceTime {
            height: .5875rem;
            text-align: right;
            /* border: solid 1px rgb(18, 59, 90); */
            line-height: .5875rem;
            min-width: 50px;
        }

        .worldMap .aRow:nth-child(2n+1) {
            background-color: rgba(64, 183, 246, 0.25);
            height: .5875rem;
            display: flex;
            /* justify-content: center; */
            align-items: center;
            padding-right: 10px;
        }

        .worldMap .aRow:nth-child(2n) {
            background-color: rgba(3, 26, 65, 0.3);
            height: .5875rem;
            display: flex;
            /* justify-content: center; */
            align-items: center;
            padding-right: 10px;
        }

        .worldMap .aRow .theRanking {
            height: .5875rem;
            text-align: center;
            line-height: .5875rem;
            font-weight: 400;
            min-width: 30px;
            font-size: .15rem;
            color: rgb(248, 248, 247);
            margin-right: 10px;
            /* border: rgb(113, 181, 234) 1px solid; */
        }

        .worldMap .aRow .country {
            height: .5875rem;
            text-align: left;
            line-height: .5875rem;
            font-weight: 400;
            min-width: 60px;
            font-size: .15rem;
            color: rgb(248, 248, 247);
            /* border: solid 1px rgb(21, 39, 53); */
        }

        .worldMap .aRow .numOfPeople {
            height: .5875rem;
            text-align: right;
            line-height: .5875rem;
            font-weight: 400;
            min-width: 60px;
            font-size: .15rem;
            color: rgb(113, 181, 234);
            /* margin-right: .25rem; */
            /* border: solid 1px rgb(10, 35, 54); */
        }

        .worldMap .aRow .serviceTime {
            height: .5875rem;
            text-align: right;
            line-height: .5875rem;
            font-weight: 400;
            min-width: 65px;
            font-size: .15rem;
            color: rgb(250, 204, 20);
            /* border: solid 1px rgb(113, 181, 234); */

        }

        .volunteer {
            position: absolute;
            top: .67rem;
            right: 0.5rem;
            z-index: 9;
            display: flex;
            align-items: center;
            /* margin-left: .1875rem; */
        }

        .volunteer .title {
            font-weight: 400;
            font-size: .225rem;
            color: rgb(4, 162, 194);
            min-width: 80px;
            width: 1.6875rem;
            height: .7rem;
            line-height: .7rem;
            /* border: khaki solid 1px; */
        }

        .volunteer .volunteerNum,
        .totalTimes {
            width: 3.18rem;
            height: .7rem;
            text-align: center;
            line-height: .7rem;
            font-size: .45rem;
            font-weight: 700;
            font-style: normal;
            /* letter-spacing: 5px; */
            letter-spacing: .072rem;
            color: #FFFF20;
            position: relative;
            margin: .0625rem;
        }

        .volunteerNum::before,
        .totalTimes::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 3.1rem;
            height: .175rem;
            border-top: 1px solid rgb(28, 103, 166);
            border-left: 1px solid rgb(28, 103, 166);
            border-right: 1px solid rgb(28, 103, 166);
            /* border-left: 2px solid #02a6b5; */
        }

        .volunteerNum::after,
        .totalTimes::after {
            position: absolute;
            bottom: 0;
            left: 0;
            content: "";
            width: 3.1rem;
            height: .175rem;
            border-bottom: 1px solid rgb(28, 103, 166);
            border-left: 1px solid rgb(28, 103, 166);
            border-right: 1px solid rgb(28, 103, 166);
        }

        .theTimes {
            color: rgb(28, 103, 166);
            display: flex;
            justify-content: center;
            align-items: center;
            /* width: 3.18rem; */
            height: .8rem;
            margin-top: 0.2rem;
            font-size: .2rem;
        }

        .no {
            background: rgba(101, 132, 226, 0.1);
            padding: 0.1875rem;
        }

        .no .no-hd {
            position: relative;
            border: 1px solid rgba(25, 186, 139, 0.17);
        }

        .no .no-hd::before {
            content: "";
            position: absolute;
            width: 30px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
            top: 0;
            left: 0;
        }

        .no .no-hd::after {
            content: "";
            position: absolute;
            width: 30px;
            height: 10px;
            border-bottom: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
            right: 0;
            bottom: 0;
        }

        .no .no-hd ul {
            display: flex;
        }

        .no .no-hd ul li {
            position: relative;
            flex: 1;
            text-align: center;
            height: 1rem;
            line-height: 1rem;
            font-size: 0.875rem;
            color: #ffeb7b;
            padding: 0.05rem 0;
            font-family: electronicFont;
            font-weight: bold;
        }

        .no .no-hd ul li:first-child::after {
            content: "";
            position: absolute;
            height: 50%;
            width: 1px;
            background: rgba(255, 255, 255, 0.2);
            right: 0;
            top: 25%;
        }

        .no .no-bd ul {
            display: flex;
        }

        .no .no-bd ul li {
            flex: 1;
            height: 0.5rem;
            line-height: 0.5rem;
            text-align: center;
            font-size: 0.225rem;
            color: rgba(255, 255, 255, 0.7);
            padding-top: 0.125rem;
        }



        @keyframes rotate {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        @keyframes rotate1 {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(-360deg);
            }
        }

        @media screen and (max-width: 1024px) {
            html {
                font-size: 42px !important;
            }
        }

        @media screen and (min-width: 1920) {
            html {
                font-size: 80px !important;
            }
        }
    </style>
</head>

<body>
<header>
    <!-- 时间 -->
    <div class="showTime">
        <!-- 2020 年 3 月 17 日<br>09 : 25 : 00 -->
    </div>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            if (h < 10) {
                h = '0' + h;
            }
            var m = dt.getMinutes(); //获取分
            if (m < 10) {
                m = '0' + m;
            }
            var s = dt.getSeconds(); //获取秒
            if (s < 10) {
                s = '0' + s;
            }
            document.querySelector(".showTime").innerHTML =
                y +
                " 年 " +
                mt +
                " 月 " +
                day +
                " 日<br>" +
                h +
                " : " +
                m +
                " : " +
                s;
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
    <!-- 标题 -->
    <h1>华文教育青年志愿者人才库可视化平台</h1>
    <!-- 天气，预留位置 -->
    <div class="showWeather">
        <div class="wicon" id="weather">
            <div>
                <img src="/img/tianqi/qingtian.png">
            </div>
            <div>晴</div>
        </div>
        <div class="temperature">18~32℃</div>
    </div>
    <!-- <script src="http://ip.ws.126.net/ipquery"></script> -->
    <script src="https://pv.sohu.com/cityjson?ie=utf-8" type="text/javascript"></script>
    <script th:src="@{/js/jquery.js}"></script>
    <script type="text/javascript">
        // var noApplicationRecord = document.getElementById('weather');
        var theTemperature;
        getWeather();
        function getWeather() {
            jQuery.support.cors = true;
            $.ajax({
                url: "http://wthrcdn.etouch.cn/weather_mini",
                type: "GET",
                dataType: 'json',
                data: { city: (returnCitySN.cname).split('省')[1] }, //(returnCitySN.cname).split('省')[1]：获取所在的市
                success: function (res) {
                    //var res=JSON.parse(res);
                    console.log(res)
                    var city = res.data.city;//所在城市
                    var maxTemperature = res.data.forecast[0].high;//最高温度

                    var minTemperature = res.data.forecast[0].low;//最低温度
                    theTemperature = minTemperature.split(' ')[1].split('℃')[0] + '~' + maxTemperature.split(' ')[1];
                    var type = res.data.forecast[0].type;//天气状态
                    console.log(theTemperature)
                    innerToHtml(theTemperature, type);
                },
                error: function (err) {
                    console.log(err)
                }

            });
            // console.log(theTemperature)
        }
        // console.log(theTemperature)
        // 温度和天气类型
        function innerToHtml(temp, type) {
            document.querySelector(".temperature").innerHTML = temp;
            var pic = '';
            if (type == '晴') {
                pic = '<img src="/img/tianqi/qingtian.png">';
            } else if (type == '多云') {
                pic = '<img src="/img/tianqi/qingzhuanduoyun.png">';
            } else if (type.indexOf('多云') != -1) {
                pic = '<img src="/img/tianqi/qingzhuanduoyun.png">';
            } else if (type == '阴') {
                pic = '<img src="/img/tianqi/duoyun.png">';
            } else if (type == '小雨') {
                pic = '<img src="/img/tianqi/xiaoyu.png">';
            } else if (type == '中雨') {
                pic = '<img src="/img/tianqi/zhongyu.png">';
            } else if (type == '大雨') {
                pic = '<img src="/img/tianqi/dayu.png">';
            } else if (type == '暴雨') {
                pic = '<img src="/img/tianqi/baoyu.png">';
            } else if (type == '雨夹雪') {
                pic = '<img src="/img/tianqi/yujiaxue.png">';
            } else if (type == '雷阵雨') {
                pic = '<img src="/img/tianqi/leizhenyu.png">';
            } else if (type.indexOf('雨') != -1) {
                pic = '<img src="/img/tianqi/zhongyu.png">';
            } else if (type == '小雪') {
                pic = '<img src="/img/tianqi/xiaoxue.png">';
            } else if (type == '中雪') {
                pic = '<img src="/img/tianqi/zhongxue.png">';
            } else if (type == '大雪') {
                pic = '<img src="/img/tianqi/daxue.png">';
            } else if (type == '暴雪') {
                pic = '<img src="/img/tianqi/baoxue.png">';
            } else if (type.indexOf('雪') != -1) {
                pic = '<img src="/img/tianqi/zhongxue.png">';
            } else if (type == '冰雹') {
                pic = '<img src="/img/tianqi/bingbao.png">';
            } else if (type == '雾霾') {
                pic = '<img src="/img/tianqi/wumai.png">';
            } else if (type == '雾凇') {
                pic = '<img src="/img/tianqi/wusong.png">';
            }
            var html =
                '<div>' +
                pic +
                '</div>' +
                '<div>' +
                type +
                '</div>' +
                '</div>';
            document.querySelector(".wicon").innerHTML = html
        }
        // window.onload = innerToHtml();
    </script>
</header>
<!-- 标题下面的图表整个大框 -->
<section class="mainbox">
    <div class="column">
        <!-- 左右侧的图表框,左上角饼图和柱形图 -->
        <div class="panel bar">
            <!-- 图表标题 -->
            <h2>
                <!-- 小箭头 -->
                <div class="arrow1">&gt;</div>
                <div class="arrow2">&gt;</div>
                <!-- 图表框的标题 -->
                &nbsp;志愿者基本情况&nbsp;
                <div class="arrow2">&lt;</div>
                <div class="arrow1">&lt;</div>
            </h2>
            <!-- <div class="contentChart"> -->
            <!-- <div id="chart1"></div> -->
            <!-- 第一个饼图 -->
            <div class="chartt"></div>
            <!-- 第二个柱形图 -->
            <div class="chart"></div>
            <!-- </div> -->
            <div class="panel-footer"></div>
        </div>
        <!-- 左右侧的图表框,左下角折线图 -->
        <div class="panel axis">
            <h2>
                <div class="arrow1">&gt;</div>
                <div class="arrow2">&gt;</div>
                &nbsp;累计注册志愿人数趋势&nbsp;
                <div class="arrow2">&lt;</div>
                <div class="arrow1">&lt;</div>
            </h2>
            <div class="theTimes">共计
                <div class="totalTimes">10086</div>
                次
            </div>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
    <!-- 中间的的总大框 -->
    <div class="column">
        <!-- 地图部分 -->
        <div class="worldMap wmap">
            <!-- 地图的标题 -->
            <h2>
                <!-- 小箭头 -->
                <div class="arrow1">&gt;</div>
                <div class="arrow2">&gt;</div>
                <!-- 标题内容 -->
                &nbsp;志愿者基本情况&nbsp;
                <div class="arrow2">&lt;</div>
                <div class="arrow1">&lt;</div>
            </h2>
            <!-- 排名 -->
            <div class="ranking">
                <!-- 一行 -->
                <div class="aRow0">
                    <div class="theRanking">
                        排名
                    </div>
                    <div class="country">
                        国家
                    </div>
                    <div class="numOfPeople">
                        志愿者人数
                    </div>
                    <div class="serviceTime">
                        服务时长
                    </div>
                </div>
                <div id="rank"></div>
                <!-- <div class="aRow">
              <div class="theRanking">
                1
              </div>
              <div class="country">
                中国
              </div>
              <div class="numOfPeople">
                666666
              </div>
              <div class="serviceTime">
                666666
              </div>
            </div>
            <div class="aRow">
              <div class="theRanking">
                2
              </div>
              <div class="country">
                阿拉斯加
              </div>
              <div class="numOfPeople">
                55555555
              </div>
              <div class="serviceTime">
                555555
              </div>
            </div>
            <div class="aRow">
              <div class="theRanking">
                1
              </div>
              <div class="country">
                中国
              </div>
              <div class="numOfPeople">
                666666
              </div>
              <div class="serviceTime">
                666666
              </div>
            </div>
            <div class="aRow">
              <div class="theRanking">
                2
              </div>
              <div class="country">
                阿拉斯加猪
              </div>
              <div class="numOfPeople">
                55
              </div>
              <div class="serviceTime">
                555555
              </div>
            </div> -->
            </div>
            <!-- 志愿者人数，地图右上角 -->
            <div class="volunteer">
                <div class="title">青年志愿者人数</div>
                <div class="volunteerNum">
                    666666
                </div>
            </div>
            <!-- 地图 -->
            <div class="chart"></div>
            <!-- 下面两个小脚的样式 -->
            <div class="worldMap-footer"></div>
        </div>
        <div class="panel2 bar2">
            <h2>
                <div class="arrow1">&gt;</div>
                <div class="arrow2">&gt;</div>
                &nbsp;累计服务对象统计&nbsp;
                <div class="arrow2">&lt;</div>
                <div class="arrow1">&lt;</div>
            </h2>

            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
    <!-- 右边的总大框 -->
    <div class="column">
        <!-- 左右侧的图表框,右上角折线图 -->
        <div class="panel axis2">
            <h2>
                <div class="arrow1">&gt;</div>
                <div class="arrow2">&gt;</div>
                &nbsp;累计开展志愿活动次数&nbsp;
                <div class="arrow2">&lt;</div>
                <div class="arrow1">&lt;</div>
            </h2>
            <div class="theTimes">共计
                <div class="totalTimes">10086</div>
                次
            </div>

            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <!-- 左右侧的图表框,右下角饼图 -->
        <div class="panel pie1">
            <!-- 标题 -->
            <h2>
                <div class="arrow1">&gt;</div>
                <div class="arrow2">&gt;</div>
                &nbsp;累计活动类型统计&nbsp;
                <div class="arrow2">&lt;</div>
                <div class="arrow1">&lt;</div>
            </h2>
            <!-- <div class="contentChar"> -->
            <!-- 饼图 -->
            <div class="chart"></div>
            <!-- </div> -->
            <div class="panel-footer"></div>
        </div>
    </div>
</section>
<script>
    // <!-- 累计注册次数，左下角数字框 -->
    var serverUrl = '/vtsp/visual';

    function getVolunteerRegisterNumberVisual() {
        var request2 = new XMLHttpRequest();
        request2.open('get', serverUrl + '/getVolunteerRegisterNumberVisual');
        request2.send();
        request2.onreadystatechange = function () {
            // console.log(request2);
            if (request2.readyState == 4 && request2.status == 200) {
                document.querySelector(".axis .totalTimes").innerHTML = request2.responseText;
            }
        }
    }
    // setInterval(getVolunteerRegisterNumberVisual, 2000);
    getVolunteerRegisterNumberVisual();

    //获得排名列表，中间地图左边的排名部分
    var noApplicationRecord = document.getElementById('rank')
    var ranking = [];
    function getVolunteerAreaVisual() {
        var request = new XMLHttpRequest();
        request.open('get', serverUrl + '/getVolunteerAreaVisual');
        request.send();
        request.onreadystatechange = function () {
            if (request.readyState == 4 && request.status == 200) {
                // console.log(request.responseText);
                var data = JSON.parse(request.responseText);
                ranking = [];
                for (var i = 0; i < data.length; i++) {
                    var r = {
                        // 排名
                        theRanking: i + 1,
                        // 国家名字
                        areaName: data[i].areaName,
                        // 人数
                        number: data[i].number,
                        // 服务时长
                        serveTime: data[i].serveTime
                    }
                    ranking.push(r);
                }
                window.onload = getnoApplicationData()
            }
        }
    }
    //绘制单个div,中间地图左边的排名
    function setDiv(item) {
        var div = '<div class="aRow">' +
            '<div class="theRanking">' +
            item.theRanking +
            '</div>' +
            '<div class="country">' +
            item.areaName +
            '</div>' +
            '<div class="numOfPeople">' +
            item.number +
            '</div>' +
            '<div class="serviceTime">' +
            item.serveTime +
            '</div>' +
            '</div>'
        return div
    }
    function getnoApplicationData() {
        var html = ''
        for (var i = 0; i < ranking.length; i++) {
            html += setDiv(ranking[i])
        }
        noApplicationRecord.innerHTML = html
    }
    window.onload = getnoApplicationData();
    // setInterval(getVolunteerAreaVisual, 3000);
    getVolunteerAreaVisual();

    //获得青年志愿者人数，中间地图的数字框
    function getVolunteerSumVisual() {
        var request4 = new XMLHttpRequest();
        request4.open('get', serverUrl + '/getVolunteerSumVisual');
        request4.send();
        request4.onreadystatechange = function () {
            // console.log(request4);
            if (request4.readyState == 4 && request4.status == 200) {
                document.querySelector(".volunteerNum").innerHTML = request4.responseText;
            }
        }
    }
    // setInterval(getVolunteerSumVisual, 2000);
    getVolunteerSumVisual();

    //获得累计开展活动次数，右上角折线图的数字框
    function getActivitySumVisual() {
        var request3 = new XMLHttpRequest();
        request3.open('get', serverUrl + '/getActivitySumVisual');
        request3.send();
        request3.onreadystatechange = function () {
            // console.log(request3);
            if (request3.readyState == 4 && request3.status == 200) {
                document.querySelector(".axis2 .totalTimes").innerHTML = request3.responseText;
            }
        }
    }
    // setInterval(getActivitySumVisual, 2000);
    getActivitySumVisual();

    //websocket请求
    var ws = new WebSocket('ws://localhost/websocket/7')
    ws.onopen = function () {
        // alert('chenggong')
    }
    ws.onerror = function () {
        alert('调用接口出错或者已失效');
    }
    ws.onmessage = function (res) {
        // var data = JSON.parse(res.data)
        // console.log(res);
        // console.log(res.data);
        if (res.data.indexOf('链接成功') == -1) {
            console.log("第二");
            var dataReplace = res.data.replace(/\"\[/g, '[');
            dataReplace = dataReplace.replace(/\]\"/g, ']');
            // console.log(res.data);
            var data = JSON.parse(dataReplace);
            // console.log(data);

            //累计注册次数，左下角数字框
            document.querySelector(".axis .totalTimes").innerHTML = data["注册志愿者的总次数"];

            // 查询各个国家的志愿者人数以及总服务时长,获得排名列表
            ranking = [];
            for (var i = 0; i < data["查询各个国家的志愿者人数以及总服务时长"].length; i++) {
                var r = {
                    // 排名
                    theRanking: i + 1,
                    // 国家名字
                    areaName: data["查询各个国家的志愿者人数以及总服务时长"][i].areaName,
                    // 人数
                    number: data["查询各个国家的志愿者人数以及总服务时长"][i].number,
                    // 服务时长
                    serveTime: data["查询各个国家的志愿者人数以及总服务时长"][i].serveTime
                }
                ranking.push(r);
            }
            window.onload = getnoApplicationData();

            // 获得青年志愿者人数,中间数字框
            document.querySelector(".volunteerNum").innerHTML = data["正式志愿者的总人数"];

            //获得累计开展活动次数，右上角折线图数字框
            document.querySelector(".axis2 .totalTimes").innerHTML = data["累计开展活动的的总人数"];

        } else {
            console.log("diyici");
        }
    }


</script>
<script th:src="@{/js/flexible.js}"></script>
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/js/index.js}"></script>
<script th:src="@{/js/worldMap.js}"></script>
<!-- <script src="js/vue.config.js"></script> -->
</body>

</html>